<template>
  <div>

    <!-- 表单 -->
    <el-form size="small" :model="form" :inline="true">
      <el-form-item label="身 份" style="font-weight:bold;">
        <el-select v-model="form.type" placeholder="请选择" style="width:150px;" clearable>
          <el-option label="学生" value="0"></el-option>
          <el-option label="教职工" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校 区" style="font-weight:bold;">
        <el-select v-model="form.campusName" placeholder="请选择校区" style="width:150px;" clearable>
          <el-option v-for="item in CampusName" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="楼 宇" style="font-weight:bold;">
        <el-select v-model="form.buildName" placeholder="请选择楼宇" style="width:150px;" clearable>
          <el-option v-for="item in buildName" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="姓 名" style="font-weight:bold;">
        <el-input v-model="form.name" placeholder="请输入学生姓名" style="width:150px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号" style="font-weight:bold;">
        <el-input v-model="form.number" placeholder="请输入手机号" style="width:150px;" clearable></el-input>
      </el-form-item>



      <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
        @click="getPageList">查询</el-button>
      <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <!-- 表单 -->

    <el-button size="small" type="success" plain icon="el-icon-download" @click="exportSurvey">导出调查表</el-button>
    <el-divider></el-divider>
    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="phone" label="电话" align="center"></el-table-column>
      <el-table-column prop="userType" label="类型" align="center">
        <template slot-scope="scope">
          <span v-if="(scope.row.userType == 0)">学生</span>
          <span v-if="(scope.row.userType == 1)">教职工</span>
        </template>
      </el-table-column>
      <el-table-column prop="campusName" label="校区" align="center"></el-table-column>
      <!-- <el-table-column prop="buildName" label="楼宇" align="center"></el-table-column> -->
      <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-search" @click="lookDetail(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>


    <el-dialog title="调查问卷详情" :visible.sync="showDetail" top="5vh" width="70%">
      <el-descriptions class="margin-top" :column="2" size="medium" border>
        <el-descriptions-item v-for="item in detail" :key="item.index">
          <template slot="label">
            <i class="el-icon-document"></i>
            {{ item.qus }}
          </template>
          {{ item.answer }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
import { getPageList, getDetail, exportSurvey } from '_api/SatisfactionSurvey/index.js'
import { getCampusName, getBuildingName } from '_api/DormManage/Building/index.js'

export default {
  data() {
    return {
      showDetail: false,
      form: {
        type: "",
        name: "",
        number: "",
        campusName: "",
        buildName: "",
        pageSize: 10,
        current: 0,
      },
      tableData: [],
      total: 0,
      CampusName: [],
      campusId: "",
      buildName: [],
      detail: [],
      timeNow: ""
    }
  },
  watch: {
    form: {
      // 执行方法
      handler(oldValue, newValue) {
        this.CampusName.forEach(item => {
          if (newValue.campusName) {
            if (newValue.campusName == item.name) {
              this.campusId = item.id
            }
          } else {
            this.campusId = ''
          }
        })
        // getBuildingName({ campusId: this.campusId }).then(res => {
        //   if (res.status == 200) {
        //     this.buildName = res.data.data
        //   }
        // })
      },
      deep: true, // 深度监听
      // immediate: true  // 第一次改变就执行
    }
  },
  methods: {
    //获取当前时间
    getCurrentTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      this.timeNow = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;

    },
    // 导出满意度
    exportSurvey() {
      exportSurvey(this.form).then(res => {
        const link = document.createElement('a')  //创建a标签
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
        link.style.display = 'none'// 设置连接
        link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
        this.getCurrentTime()
        link.download = '满意度调查表_' + this.timeNow
        document.body.appendChild(link) // 模拟点击事件
        link.click()  //设置点击事件
        this.$message.success('导出成功！')
      })
    },
    reset() {
      this.form = {
        name: "",
        number: "",
        campusName: "",
        buildName: "",
        pageSize: 10,
        current: 0,
      }
      this.getPageList()
    },
    handleCurrentChange(e) {
      //当前页
      this.form.current = (e - 1) * 10
      this.getPageList()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getPageList()
    },
    //获取校区名称
    getCampusName() {
      getCampusName().then(res => {
        if (res.data.success == true) {
          this.CampusName = res.data.data
          this.getBuildingName()
        }
      })
    },

    //获取楼宇名称
    // getBuildingName() {
    //   getBuildingName({ type: 0 }).then(res => {
    //     if (res.data.success == true) {
    //       this.buildName = res.data.data
    //     }
    //   })
    // },
    getPageList() {
      getPageList(this.form).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
          this.getCampusName()
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    lookDetail(e) {
      getDetail({ id: e }).then(res => {
        if (res.data.success == true) {
          res.data.data.content.forEach(item => {
            for (var k in item) {
              // console.log(k);
              console.log(item[k]);
              // if (item[k] == 0) {
              //   item[k] = "未填写"
              // }
              if (item[k] == 'E') {
                item[k] = "非常不满意"
              }
              if (item[k] == 'D') {
                item[k] = "不满意"
              }
              if (item[k] == 'C') {
                item[k] = "满意"
              }
              if (item[k] == 'B') {
                item[k] = "比较满意"
              }
              if (item[k] == 'A') {
                item[k] = "非常满意"
              }
              let qus = 'qus';
              item[qus] = k
              let answer = 'answer';
              item[answer] = item[k]
            }
          });
          console.log(res.data.data.content)

          this.showDetail = true
          this.detail = res.data.data.content
        } else {
          this.$message.info(res.data.message)
        }
      })
    }

  },
  created() {
    this.getPageList()
  },


};
</script>
<style lang="scss" >
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
